<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RAG Demo - MCP Servers 管理</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.prod.js"></script>
  <!-- Axios for API calls -->
  <script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
  <style>
    .server-list {
      max-height: 400px;
      overflow-y: auto;
    }
    .tool-list {
      margin-left: 20px;
      font-size: 0.9em;
    }
  </style>
</head>
<body>
  <div id="app" class="container mt-5">
    <!-- 标题 -->
    <h1 class="mb-4">MCP Servers 管理</h1>
    <!-- 导航 -->
    <nav class="mb-4">
      <a href="chat.html" class="btn btn-primary me-2">前往对话页面</a>
    </nav>
    <!-- MCP Servers 管理区域 -->
    <div class="card">
      <div class="card-header">MCP Servers 管理</div>
      <div class="card-body">
        <div class="mb-3">
          <label for="serverName" class="form-label">服务器名称</label>
          <input v-model="newServer.name" type="text" class="form-control" id="serverName" placeholder="例如：Production MCP">
          <label for="serverUrl" class="form-label mt-2">服务器 URL</label>
          <input v-model="newServer.url" type="text" class="form-control" id="serverUrl" placeholder="例如：https://mcp.example.com/sse">
          <label for="serverDescription" class="form-label mt-2">描述</label>
          <textarea v-model="newServer.description" class="form-control" id="serverDescription" placeholder="可选：服务器用途说明"></textarea>
          <label for="serverAuthType" class="form-label mt-2">认证类型</label>
          <select v-model="newServer.auth_type" class="form-control" id="serverAuthType">
            <option value="none">无认证</option>
            <option value="api_key">API Key</option>
            <option value="bearer">Bearer Token</option>
          </select>
          <label for="serverAuthValue" class="form-label mt-2">认证值</label>
          <input v-model="newServer.auth_value" type="text" class="form-control" id="serverAuthValue" placeholder="例如：API Key 或 Token">
          <button class="btn btn-primary mt-3" @click="addServer">{{ editingServerId ? '更新服务器' : '添加服务器' }}</button>
        </div>
        <!-- 服务器列表 -->
        <div class="server-list">
          <ul class="list-group">
            <li v-for="server in mcpServers" :key="server.id" class="list-group-item">
              <div class="d-flex justify-content-between align-items-center">
                <span>{{ server.name }} ({{ server.url }})</span>
                <div>
                  <button class="btn btn-info btn-sm me-2" @click="refreshTools(server.id)">刷新工具</button>
                  <button class="btn btn-warning btn-sm me-2" @click="editServer(server)">编辑</button>
                  <button class="btn btn-danger btn-sm" @click="deleteServer(server.id)">删除</button>
                </div>
              </div>
              <!-- 显示关联工具 -->
              <div class="tool-list mt-2" v-if="serverTools[server.id] && serverTools[server.id].length">
                <strong>工具列表：</strong>
                <ul>
                  <li v-for="tool in serverTools[server.id]" :key="tool.id">{{ tool.name }} ({{ tool.endpoint }})</li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <script>
    const { createApp } = Vue;

    // 全局设置 axios 的 baseURL
    axios.defaults.baseURL = 'https://www.en9.cn';

    createApp({
      data() {
        return {
          mcpServers: [], // 存储 MCP 服务器列表
          serverTools: {}, // 存储每个服务器的工具列表
          newServer: {
            name: '',
            url: '',
            description: '',
            auth_type: 'none',
            auth_value: ''
          },
          editingServerId: null // 跟踪当前编辑的服务器 ID
        };
      },
      mounted() {
        this.fetchMcpServers();
      },
      methods: {
        async fetchMcpServers() {
          try {
            const response = await axios.get('api/mcp/servers');
            this.mcpServers = response.data;
            // Fetch tools for each server
            for (const server of this.mcpServers) {
              await this.fetchServerTools(server.id);
            }
          } catch (error) {
            console.error('获取 MCP 服务器列表失败:', error);
            alert('获取 MCP 服务器列表失败！');
          }
        },
        async fetchServerTools(serverId) {
          try {
            const response = await axios.get('api/mcp/tools', { params: { server_id: serverId } });
            this.serverTools[serverId] = response.data;
          } catch (error) {
            console.error(`获取服务器 ${serverId} 的工具列表失败:`, error);
            this.serverTools[serverId] = [];
          }
        },
        async addServer() {
          if (!this.newServer.name || !this.newServer.url) {
            alert('服务器名称和 URL 为必填项！');
            return;
          }
          // Basic URL validation
          try {
            new URL(this.newServer.url);
          } catch (e) {
            alert('请输入有效的 URL！');
            return;
          }
          try {
            if (this.editingServerId) {
              // Update existing server
              await axios.put(`api/mcp/servers/${this.editingServerId}`, this.newServer);
              alert('服务器更新成功！');
            } else {
              // Create new server
              await axios.post('api/mcp/servers', this.newServer);
              alert('服务器添加成功！');
            }
            this.newServer = { name: '', url: '', description: '', auth_type: 'none', auth_value: '' };
            this.editingServerId = null;
            this.fetchMcpServers();
          } catch (error) {
            console.error('操作服务器失败:', error);
            alert(`操作服务器失败：${error.response?.data?.detail || error.message}`);
          }
        },
        editServer(server) {
          this.newServer = { ...server };
          this.editingServerId = server.id;
        },
        async deleteServer(serverId) {
          if (!confirm('确定要删除此 MCP 服务器吗？')) return;
          try {
            await axios.delete(`api/mcp/servers/${serverId}`);
            alert('服务器删除成功！');
            this.fetchMcpServers();
          } catch (error) {
            console.error('删除服务器失败:', error);
            alert('删除服务器失败！');
          }
        },
        async refreshTools(serverId) {
          try {
            await axios.post(`api/mcp/servers/${serverId}/refresh-tools`);
            alert('工具刷新成功！');
            await this.fetchServerTools(serverId);
          } catch (error) {
            console.error('刷新工具失败:', error);
            alert('刷新工具失败！');
          }
        }
      }
    }).mount('#app');
  </script>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>